

var xhr = new XMLHttpRequest()
xhr.open('get', 'http://43.138.81.225/demo/php/searchAllGoods.php', true)
xhr.send()
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var res = JSON.parse(xhr.responseText).list
        var html = ``
        res.forEach(({ id, goodsId, goodsName, goodsMsg, goodsImg, goodsPrice }) => {

            html += `
            <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="${goodsImg}" alt="" /><span>${goodsName}</span></td>
                    <td class="price">${parseInt(goodsPrice).toFixed(2)}</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">640.60</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
            `
        })
        var tbody = document.getElementsByTagName('tbody')[0]
        tbody.innerHTML = html


        var checkAll = document.getElementsByClassName('check-all')[0]
        var checkList = Array.from(document.getElementsByClassName('check-one'))
        var addList = Array.from(document.getElementsByClassName('add'))
        var reduceList = Array.from(document.getElementsByClassName('reduce'))
        var deleteList = Array.from(document.getElementsByClassName('delete'))
        var deleteAll = document.getElementById('deleteAll')
        var selAll = document.getElementById('selectedTotal')
        var priceTotal = document.getElementById('priceTotal')


        //全选反选
        //单点全选-对单选框进行修改
        checkAll.onclick = function () {
            //循环遍历让单选框跟全选框状态一样
            for (let i = 0; i < checkList.length; i++) {
                checkList[i].checked = checkAll.checked
            }
            getAll()//计算总计的数量和价格//计算总计的数量和价格
        }
        //循环遍历单选框，如果全部选中则全选为true，否则为false
        var checkList = Array.from(document.getElementsByClassName('check-one'))
        checkList.forEach(function (check) {
            check.onclick = function () {
                getAll()//计算总计的数量和价格
                checkAll.checked = checkList.every(function (check) {
                    return check.checked == true
                })
            }
        })
        //加号绑定事件
        addList.forEach(function (add) {
            add.onclick = function () {
                var val = add.previousElementSibling.value //取值
                val++//改值
                add.previousElementSibling.value = val//赋值
                //获取当前商品的价格
                var price = add.parentElement.previousElementSibling.innerHTML
                //计算小计并赋值
                add.parentElement.nextElementSibling.innerHTML = (val * price).toFixed(2)
                add.previousElementSibling.previousElementSibling.innerHTML = '-'
                getAll()//计算总计的数量和价格
            }
        })
        //减号绑定事件
        reduceList.forEach(function (reduce) {
            reduce.onclick = function () {
                var val = reduce.nextElementSibling.value //取值
                //如果数量减少到一的话，则提醒不能减少，删除'-'号并return出去不执行下面改值的操作
                if (val <= 1) {
                    alert('亲，实在是不能在少了哦！')
                    return
                }
                val--//改值
                if (val == 1) {
                    reduce.innerHTML = ''
                }
                reduce.nextElementSibling.value = val//赋值
                //获取当前商品的价格
                var price = reduce.parentElement.previousElementSibling.innerHTML
                //计算小计并赋值
                reduce.parentElement.nextElementSibling.innerHTML = (val * price).toFixed(2)
                getAll()//计算总计的数量和价格
            }
        })
        //单删全删的绑定判断
        //单删
        deleteList.forEach(function (del) {
            del.onclick = function () {
                del.parentElement.parentElement.remove()
                var checkList = Array.from(document.getElementsByClassName('check-one'))
                checkAll.checked = checkList.every(function (check) {
                    return check.checked == true
                })
                checkdel()//判断删除之后全选状态
                getAll()//计算总计的数量和价格
            }
        })
        //全删
        deleteAll.onclick = function () {
            checkList.forEach(function (check) {
                if (check.checked) {
                    check.parentElement.parentElement.remove()
                }
            })
            checkdel()//判断删除之后全选状态
            getAll()//计算总计的数量和价格
        }
        //判断删除之后全选状态
        function checkdel() {
            var checkList = Array.from(document.getElementsByClassName('check-one'))
            if (checkList.length == 0) {
                checkAll.checked = false
            }
        }
        //结算
        function getAll() {
            var allNum = 0
            var allPrice = 0
            var checkList = Array.from(document.getElementsByClassName('check-one'))
            checkList.forEach(function (check) {
                if (check.checked) {
                    var thisNum = check.parentElement.nextElementSibling.nextElementSibling.nextElementSibling.firstElementChild.nextElementSibling.value * 1
                    var thisPrice = check.parentElement.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.innerHTML * 1
                    allNum += thisNum
                    allPrice += thisPrice
                }
            })
            selAll.innerHTML = allNum
            priceTotal.innerHTML = allPrice.toFixed(2)
        }







    }
}





































